
<script setup>
import { ref } from 'vue';

const alert= ref(false)

const setAlert = (b)=>{
    alert.value=b;
}

const myData = ref({
  url:"/cyImgDemo.png",
  name:"火锅底料一份"
});

const setData = (b) => {
  myData.value=b;
}

defineExpose({ setAlert,setData })

</script>

<template>
    <div v-if="alert" class="masking" >
      <div class="record" >
        <div style="height: 32px;" ></div>
        <div class="alertImg" >
          <img :src="myData.url" />
        </div>
        <div style="height: 32px;" ></div>
        <div class="alertTitle" >{{ myData.name }}</div>
        <div class="alertBtn" @click="()=>{ alert=false }" ></div>
      </div>
    </div>
</template>

<style lang="less" scoped>

.masking{
  position: fixed;
  top:0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  .record{
    width: 279px;
    height: 333px;
    background: linear-gradient(180deg, #FFEAEE 0%, #FFFFFF 100%);
    border-radius: 12px 12px 12px 12px;
    position: relative;
    .alertImg{
        width: 215px;
        height: 215px;
        margin: 0 auto;
        img{
          width: 215px;
          height: 215px;
          display: block;
        }
    }
    .alertTitle{
        color: #333333;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
    }
    
    .alertBtn{
        position: absolute;
        background: url(../assets/closeBg.png);
        background-size: 32px 32px;
        background-repeat: no-repeat;
        width: 32px;
        height: 32px;
        bottom: -48px;
        left:  calc(50% - 16px);
        // margin: 0 auto;
    }
  }
}

</style>